<template>
    <div class="wraper">
        <swiper :options="swiperOption">
        <swiper-slide 
            v-for="item of headerImg" 
            :key="item.id">
            <img class="swiper-img" :src="item.imgUrl"/>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
    </div>
</template>
<script>
export default {
    name: 'homeSwiper',
    props: {
        swiperList: Array
    },
    data(){
        return {
            headerImg: [
                {
                    id: "001",
                    imgUrl: 'https://pic5.40017.cn/04/000/b2/62/rBTJU13zOPqACH3hAAD-_lz9GPE994_520x218_00.jpg'
                },
                {
                    id: "002",
                    imgUrl: 'https://pic5.40017.cn/04/001/8b/b3/rBTJUl3fqiCAGl8JAAJPhsYgQjs199_520x218_00.jpg'
                }
            ],
            swiperOption: {
                pagination: '.swiper-pagination',
                loop: true
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.wraper /deep/ .swiper-pagination-bullet{
    background: #ffffff;
}
.swiper-img{
    width:100%;
}
</style>